<script lang="ts" setup>
import { getprmg, search, getprmg2 } from '@/apizzq/prmg'
import { onMounted, ref, type Ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'

const activeName = ref('first')
const activeName2 = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
let val: Ref<string> = ref('')
let name: Ref<string> = ref('')
let arr: Ref<any[]> = ref([])
let iS: Ref<boolean> = ref(true)

let options: Ref<any[]> = ref([{ label: '均衡模式', value: '均衡模式' }, { label: '节能模式', value: '节能模式' }, { label: '性能模式', value: '性能模式' }])
let options2: Ref<any[]> = ref([{ label: '出口恒压', value: '出口恒压' }, { label: '末端恒压', value: '末端恒压' },])
let h: Ref<string> = ref('')
let m: Ref<string> = ref('')
let value4: Ref<boolean> = ref(true)
let value: Ref<string> = ref('均衡模式')
let value2: Ref<string> = ref('出口恒压')
let options3: Ref<any[]> = ref([{ label: '均衡模式', value: '均衡模式' }, { label: '节能模式', value: '节能模式' }, { label: '性能模式', value: '性能模式' }])
let options4: Ref<any[]> = ref([{ label: '出口恒压', value: '出口恒压' }, { label: '末端恒压', value: '末端恒压' },])
let value5: Ref<boolean> = ref(true)
let value3: Ref<string> = ref('均衡模式')
let value6: Ref<string> = ref('出口恒压')


let hoptions: Ref<any[]> = ref([{ label: '均衡模式', value: '均衡模式' }, { label: '节能模式', value: '节能模式' }, { label: '性能模式', value: '性能模式' }])
let hoptions2: Ref<any[]> = ref([{ label: '出口恒压', value: '出口恒压' }, { label: '末端恒压', value: '末端恒压' },])
let hh: Ref<string> = ref('')
let hm: Ref<string> = ref('')
let hvalue4: Ref<boolean> = ref(true)
let hvalue: Ref<string> = ref('均衡模式')
let hvalue2: Ref<string> = ref('出口恒压')
let hoptions3: Ref<any[]> = ref([{ label: '均衡模式', value: '均衡模式' }, { label: '节能模式', value: '节能模式' }, { label: '性能模式', value: '性能模式' }])
let hoptions4: Ref<any[]> = ref([{ label: '出口恒压', value: '出口恒压' }, { label: '末端恒压', value: '末端恒压' },])
let hvalue5: Ref<boolean> = ref(true)
let hvalue3: Ref<string> = ref('均衡模式')
let hvalue6: Ref<string> = ref('出口恒压')
let h1: Ref<boolean> = ref(true)
let h2: Ref<boolean> = ref(true)
let h3: Ref<boolean> = ref(true)
let h4: Ref<boolean> = ref(true)
let h5: Ref<boolean> = ref(true)
let h6: Ref<boolean> = ref(true)
let arr2: Ref<any[]> = ref([])

onMounted(() => {
    getprmg().then(res => {
        arr.value = res.data
    })
    getprmg2().then(res => {

        arr2.value = res.data
        console.log(arr2.value[0].ifs);

    })
})
function bg(index: number) {
    for (let i = 0; i < arr.value.length; i++) {
        arr.value[i].iS = false
    }
    arr.value[index].iS = true
    name.value = arr.value[index].name
}
function seach() {
    search(val.value).then(res => {
        // console.log(res);
        arr.value = res.data
    })
}
</script>
<template>
    <div style="display: flex;">
        <div style="width: 30%;border: 1px solid #ccc ;">
            <div
                style="padding-left: 20px ;line-height: 40px; color:#fff;background-color: #3f98f0;width: 100%;height:40px;">
                辖区泵房列表</div>
            <div style="padding: 10px ; background-color: #fff;">
                <el-input @input="seach()" v-model="val" prefix-icon="Search" placeholder="请输入关键字搜索"></el-input>
                <div v-for="(item, index) in arr" :key="item.id" class="aaa" @click="bg(index)
                    " :style="item.iS ? 'background-color: #3f98f0;color: #fff ;' : 'background-color: #fff;'">
                    <div style="display: flex;">
                        <el-image style="width: 20px; height: 20px;" :src="item.img"></el-image><span
                            style="text-wrap: nowrap;margin-left: 10px;user-select: none;">{{ item.name }}</span>
                    </div>
                    <div>></div>
                </div>
            </div>
        </div>
        <div style="width: 69%; margin-left: 1%;">
            <div style=" display: flex;height: 100%;justify-content: space-between;flex-flow: row wrap;">
                <div style="height: 27.5%;width: 60%;background-color: #fff;">
                    <div style="height: 40px;background-color: #3f98f0;line-height: 40px;padding-left: 10px;color: #fff;">
                        {{ name
                        }}
                        <img style="width: 98%;margin-top: 40px;" src="../../assets/zzqprmg.png" alt="">
                    </div>
                </div>

                <div style="width: 39%;height: 27.5%;background-color: #fff;">
                    <div style="display: flex;justify-content: space-between;height: 40px;">
                        <div class="bbb" @click="iS = true" :style="iS ? 'background-color: #3f98f0;color:#fff;' : ''">简易设置
                        </div>
                        <div class="bbb" @click="iS = false" :style="iS ? '' : 'background-color: #3f98f0;color:#fff;'">高级设置
                        </div>
                    </div>
                    <div style="height: calc(100% - 40px);">
                        <el-tabs v-show="iS" stretch v-model="activeName" class="demo-tabs" @tab-click="handleClick"
                            style="height: calc(100% - 40px);">
                            <el-tab-pane label="中区"
                                style="display: flex;height: 100%;flex-flow: column nowrap;justify-content: center;align-items: center;"
                                name="first">
                                <div>总开关<el-switch v-model="value4" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin-left: 20px;"
                                        active-text="ON" inactive-text="OFF" /></div>
                                <div>运行模式<el-select v-model="value" placeholder="Select" size="large"
                                        style="width: 120px;min-height: 25px;margin: 10px 0;margin-left: 10px;">
                                        <el-option v-for="item in options" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div>恒压模式<el-select v-model="value2" placeholder="Select" size="large"
                                        style="width: 120px;min-height: 25px;margin-left: 10px;">
                                        <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div>设定压力 <el-input v-model="m" placeholder="请输入数字"
                                        style="margin: 10px 0;position: relative;width: 120px;margin-left: 5px;height: 25px;"></el-input><span
                                        style="position: absolute;font-size: 13px;right: 23%;top: 59%;">Mpa</span></div>
                                <div><el-button type="primary" style="height: 28px;margin-top: 20px;">确定</el-button></div>
                            </el-tab-pane>
                            <el-tab-pane label="高区"
                                style="display: flex;height: 100%;flex-flow: column nowrap;justify-content: center;align-items: center;"
                                name="sec">
                                <div>总开关<el-switch v-model="value5" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin-left: 20px;"
                                        active-text="ON" inactive-text="OFF" /></div>
                                <div>运行模式<el-select v-model="value3" placeholder="Select" size="large"
                                        style="width: 120px;min-height: 25px;margin: 10px 0;margin-left: 10px;">
                                        <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div>恒压模式<el-select v-model="value6" placeholder="Select" size="large"
                                        style="width: 120px;min-height: 25px;margin-left: 10px;">
                                        <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div>设定压力 <el-input v-model="h" placeholder="请输入数字"
                                        style="margin: 10px 0;position: relative;width: 120px;margin-left: 5px;height: 25px;"></el-input><span
                                        style="position: absolute;font-size: 13px;right: 23%;top: 59%;">Mpa</span></div>
                                <div><el-button type="primary" style="height: 28px;margin-top: 20px;">确定</el-button></div>
                            </el-tab-pane>
                        </el-tabs>
                        <el-tabs v-show="!iS" stretch v-model="activeName2" class="demo-tabs" @tab-click="handleClick"
                            style="height: calc(100% - 40px);">
                            <el-tab-pane label="中区" style="display: flex;height: 100%;flex-flow: column nowrap;justify-content:
                                center;align-items: center;" name="first">
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    &nbsp;&nbsp;总开关<el-switch v-model="hvalue4" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 10px;"
                                        active-text="ON" inactive-text="OFF" />
                                    运行模式<el-select v-model="hvalue" placeholder="Select" size="large"
                                        style="width: 100px;min-height: 25px;margin: 10px 0;margin-left: 10px;">
                                        <el-option v-for="item in hoptions" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    1#泵开关<el-switch v-model="h1" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 8px;"
                                        active-text="ON" inactive-text="OFF" />
                                    恒压模式<el-select v-model="hvalue2" placeholder="Select" size="large"
                                        style="width: 100px;min-height: 25px;margin:0 10px;">
                                        <el-option v-for="item in hoptions2" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    2#泵开关<el-switch v-model="h2" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 8px;"
                                        active-text="ON" inactive-text="OFF" />
                                    设定压力 <el-input v-model="hm" placeholder="请输入数字"
                                        style="margin: 10px 0;position: relative;width: 100px;margin:10px 10px;height: 25px;"></el-input><span
                                        style="background: #fff;position: absolute;font-size: 13px;right: 14%;top: 46%;">Mpa</span>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;margin-right: 165px;">
                                    3#泵开关<el-switch v-model="h3" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 10px;"
                                        active-text="ON" inactive-text="OFF" />
                                </div>
                                <div><el-button type="primary" style="height: 28px;margin-top: 20px;">确定</el-button></div>
                            </el-tab-pane>
                            <el-tab-pane label="高区"
                                style="display: flex;height: 100%;flex-flow: column nowrap;justify-content: center;align-items: center;"
                                name="second">
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    &nbsp;&nbsp;总开关<el-switch v-model="hvalue5" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 10px;"
                                        active-text="ON" inactive-text="OFF" />
                                    运行模式<el-select v-model="hvalue3" placeholder="Select" size="large"
                                        style="width: 100px;min-height: 25px;margin: 10px 0;margin-left: 10px;">
                                        <el-option v-for="item in hoptions3" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    1#泵开关<el-switch v-model="h4" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 8px;"
                                        active-text="ON" inactive-text="OFF" />恒压模式<el-select v-model="hvalue6"
                                        placeholder="Select" size="large"
                                        style="width: 100px;min-height: 25px;margin:0 10px;">
                                        <el-option v-for="item in hoptions4" :key="item.value" :label="item.label"
                                            :value="item.value" />
                                    </el-select>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;">
                                    2#泵开关<el-switch v-model="h5" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 8px;"
                                        active-text="ON" inactive-text="OFF" />
                                    设定压力 <el-input v-model="hh" placeholder="请输入数字"
                                        style="margin: 10px 10px;position: relative;width: 100px;height: 25px;"></el-input><span
                                        style="background: #fff;position: absolute;font-size: 13px;right: 14%;top: 46%;">Mpa</span>
                                </div>
                                <div style="display: flex;font-size: 12px;align-items: center;margin-right: 165px;">
                                    3#泵开关<el-switch v-model="h6" class="ml-2" inline-prompt
                                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ccc; margin:0 10px;"
                                        active-text="ON" inactive-text="OFF" />
                                </div>
                                <div>
                                    <el-button type="primary" style="height: 28px;margin-top: 20px;">确定</el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div v-for="item in arr2"
                    style=" margin: 20px 0;display: flex;width:100%;height: 30%;justify-content: space-between;text-wrap: nowrap;">
                    <div
                        style="width: 49.9%;height: 100%;background-color: #fff;font-size: 15px;display: flex;flex-flow: column;justify-content: center;">
                        <div
                            style="font-size: 18px; margin-left: 10px;padding-left: 10px;margin-top: 10px;border-bottom: 1px solid #ccc;height: 15%;line-height: 250%;">
                            中区供水设备运行情况
                        </div>
                        <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>进口压力 {{ item.ips }}Mpa</div>
                            <div style="margin-left: 40px;">1#水泵</div>
                            <div style="margin-left: 40px;">2#水泵</div>
                            <div style="margin-left: 40px;">3#水泵</div>
                        </div>
                        <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>进口流量 {{ item.ifs }}m<sup>3</sup>/h</div>
                            <div style="margin-left: 25px;">电流 {{ item.current1 }}A</div>
                            <div style="margin-left: 25px;">电流 {{ item.current2 }}A</div>
                            <div style="margin-left: 25px;">电流 {{ item.current3 }}A</div>
                        </div>
                        <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>出口压力 {{ item.ops }}Mpa</div>
                            <div style="margin-left: 10px;">频率 {{ item.frequency1 }}HZ</div>
                            <div style="margin-left: 10px;">频率 {{ item.frequency2 }}HZ</div>
                            <div style="margin-left: 10px;">频率 {{ item.frequency3 }}HZ</div>
                        </div>
                        <div
                            style="height: 15%;margin-left: 10px;padding-left: 10px;display: flex;align-items: center;border-bottom: 1px solid #ccc;">
                            末端压力 {{item.eps}}Mpa
                        </div>
                        <div
                            style="height: 15%;margin-left: 10px;padding-left: 10px;align-items: center;display: flex;border-bottom: 1px solid #ccc;">
                            电源电压 {{item.sv}}V
                        </div>
                    </div>
                    <div
                        style="width: 49.9%;height: 100%;background-color: #fff;font-size: 15px;display: flex;flex-flow: column;justify-content: center;">
                        <div
                            style="font-size: 18px; margin-left: 10px;padding-left: 10px;margin-top: 10px;border-bottom: 1px solid #ccc;height: 15%;line-height: 250%;">
                            高区供水设备运行情况</div>
                            <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>进口压力 {{ item.hips }}Mpa</div>
                            <div style="margin-left: 40px;">1#水泵</div>
                            <div style="margin-left: 40px;">2#水泵</div>
                            <div style="margin-left: 40px;">3#水泵</div>
                        </div>
                        <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>进口流量 {{ item.hifs }}m<sup>3</sup>/h</div>
                            <div style="margin-left: 25px;">电流 {{ item.hcurrent1 }}A</div>
                            <div style="margin-left: 25px;">电流 {{ item.hcurrent2 }}A</div>
                            <div style="margin-left: 25px;">电流 {{ item.hcurrent3 }}A</div>
                        </div>
                        <div
                            style="height: 15%;display: flex;margin-left: 10px;padding-left: 10px;align-items: center;border-bottom: 1px solid #ccc;">
                            <div>出口压力 {{ item.hops }}Mpa</div>
                            <div style="margin-left: 10px;">频率 {{ item.hfrequency1 }}HZ</div>
                            <div style="margin-left: 10px;">频率 {{ item.hfrequency2 }}HZ</div>
                            <div style="margin-left: 10px;">频率 {{ item.hfrequency3 }}HZ</div>
                        </div>
                        <div
                            style="height: 15%;margin-left: 10px;padding-left: 10px;display: flex;align-items: center;border-bottom: 1px solid #ccc;">
                            末端压力 {{item.heps}}Mpa
                        </div>
                        <div
                            style="height: 15%;margin-left: 10px;padding-left: 10px;align-items: center;display: flex;border-bottom: 1px solid #ccc;">
                            电源电压 {{item.hsv}}V
                        </div>
                    </div>

                </div>
                <div style="height: 45%;width: 100%; background-color: #fff;">
                    <img style="width: 100%;" src="../../assets/zzq111.png" alt="">
                </div>
                
            </div>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.aaa {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    padding: 7px 10px;
    align-content: center;
}

:deep(.el-select--large .el-select__wrapper) {
    min-height: 20px;
    padding: 6px 10px;
}

.bbb {
    width: 50%;
    text-align: center;
    line-height: 40px;
    user-select: none;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>
